<template>
      <div id="home">
                  <div v-for="path in covers" v-bind:key="path.length+path.path" style="display: inline;"
                       @click="bookviewer(path.path)">
                        <el-image
                                style="width: 45%; margin: 2.5%"
                                :src="resopa(path)"
                        ></el-image>
                  </div>
        <draggable :distanceRight='0' :distanceBottom='50' :isScrollHidden='false' :isCanDraggable='true'>
          <div style="height: 50px; width: 50px;background-color: #404040;border-radius:50%;" @click="homeInit()"></div>
        </draggable>
      </div>
</template>

<script>
import draggable from '@/compotent/Draggable'

export default {
      name: "home",
      components: {
          draggable
      },
      data() {
            return {
                  covers: []
            }
      },
      methods: {
            resopa: function (path) {
                  return this.basicUrl + "/" + path.path + "/" + path.name
            },
            bookviewer: function (path) {
                  let routeUrl = this.$router.resolve({
                        path: "/book",
                        query: {name: path}
                  });
                  window.open(routeUrl.href, '_self');
            },
            homeInit: function () {
                  let self = this;
                  this.axios.get(this.basicUrl + '/home')
                          .then(function (response) {
                                self.covers = response.data;
                                localStorage.setItem("covers", JSON.stringify(response.data))
                                localStorage.setItem("covers_time", new Date().getTime() + "")
                          }).catch(function () {
                        self.$message.error("内部错误,请按照规范填写参数" + response.status);
                  })
            }
      },
      created: function () {
            if (!localStorage.getItem("covers_time") || (localStorage.getItem("covers_time") - new Date().getTime()) > 1000 * 60 * 60) {
                  this.homeInit();
            } else {
                  this.covers = JSON.parse(localStorage.getItem("covers"))
            }
      }
}
</script>